<template>
  <div class="checkout-container">
    <!-- 加载状态 -->
    <div v-show="loading" class="loading-overlay">
      <div class="spinner">
        <i class="fa fa-spinner fa-spin fa-3x text-primary"></i>
        <p>加载中...</p>
      </div>
    </div>

    <!-- 内容区域 -->
    <div v-if="!loading">
      <!-- 顶部导航栏 -->
      <header class="checkout-header">
        <div class="container">
          <div class="logo">
            <i class="fa fa-shopping-bag"></i>
            <span>ShopEase</span>
          </div>

          <nav class="checkout-steps">
            <div class="step" :class="{ active: currentStep >= 1 }">
              <div class="step-number">1</div>
              <div class="step-label">购物车</div>
            </div>
            <div class="connector" :class="{ active: currentStep >= 2 }"></div>
            <div class="step" :class="{ active: currentStep >= 2 }">
              <div class="step-number">2</div>
              <div class="step-label">确认订单</div>
            </div>
            <div class="connector" :class="{ active: currentStep >= 3 }"></div>
            <div class="step" :class="{ active: currentStep >= 3 }">
              <div class="step-number">3</div>
              <div class="step-label">支付结算</div>
            </div>
          </nav>
        </div>
      </header>

      <!-- 主内容区 -->
      <main class="checkout-main container">
        <div class="grid">
          <!-- 左侧订单信息 -->
          <div class="col-8">
            <!-- 订单概览卡片 -->
            <div class="card order-summary">
              <h2 class="card-title">订单概览</h2>

              <div class="order-info">
                <div class="info-row">
                  <span class="label">订单号:</span>
                  <span class="value">{{ order.orderId }}</span>
                </div>
                <div class="info-row">
                  <span class="label">创建时间:</span>
                  <span class="value">{{ formatDate(order.createdAt) || '-' }}</span>
                </div>
                <div class="info-row status">
                  <span class="label">订单状态:</span>
                  <span class="value status-badge" :class="getStatusClass(order.status)">{{
                      getStatusText(order.status)
                    }}</span>
                </div>
              </div>
              <button class="edit-btn" @click="editAddress">
                <i class="fa fa-pencil"></i> 地址
              </button>
              <!-- 收货地址 -->
              <div class="address-section">
                <h3 class="section-title">收货地址</h3>
                <div class="address-card" v-if="order.shippingAddress">
                  <div class="recipient-info">
                    <span class="name">{{ order.shippingAddress.name || '-' }}</span>
                    <span class="phone">{{ formatPhone(order.shippingAddress.phone) || '-' }}</span>
                  </div>
                  <div class="address-details">
                    <i class="fa fa-map-marker"></i>
                    <span>{{ order.shippingAddress.addressLine1 || '-' }}, {{ order.shippingAddress.city || '-' }},
                    {{ order.shippingAddress.province || '-' }}, {{ order.shippingAddress.postalCode || '-' }}</span>
                  </div>

                </div>
                <div v-else class="empty-address">
                  <p>暂无收货地址</p>
                </div>
              </div>

              <!-- 商品列表 -->
              <div class="products-section">
                <h3 class="section-title">商品列表</h3>
                <div class="product-list">
                  <div v-for="(item, index) in order.productVo || []" :key="item.id" class="product-item">
                    <div class="product-image">
                      <img :src="item.imageUrl || 'https://picsum.photos/120/120'" alt="商品图片" class="img-thumbnail">
                    </div>
                    <div class="product-details">
                      <h4 class="product-name">{{ item.name || '-' }}</h4>
                      <p class="product-sku">{{ item.sku || '-' }}</p>
                      <div class="price-info">
                        <span class="price">¥{{ (item.price || 0).toFixed(2) }}</span>
                        <span class="quantity">x{{ item.quantity || 0 }}</span>
                      </div>
                    </div>
                    <div class="product-subtotal">
                      <span class="subtotal-amount">¥{{ ((item.price || 0) * (item.quantity || 0)).toFixed(2) }}</span>
                    </div>
                  </div>
                  <div v-if="!(order.productVo && order.productVo.length)" class="empty-products">
                    <p>订单中没有商品</p>
                  </div>
                </div>
              </div>
              <div class="summary-items">
                <div class="summary-item">
                  <span class="label">商品总价:</span>
                  <span class="value">¥{{ (order.totalPrice || 0).toFixed(2) }}</span>
                </div>
                <div class="summary-item">
                  <span class="label">运费:</span>
                  <span class="value">¥{{ (order.shippingFee || 0).toFixed(2) }}</span>
                </div>
                <div class="summary-item discount">
                  <span class="label">优惠折扣:</span>
                  <span class="value">-¥{{ (order.discount || 0).toFixed(2) }}</span>
                </div>
                <div class="summary-item total">
                  <span class="label">实付款:</span>
                  <span class="value"
                  >¥{{ ((order.totalPrice || 0) + (order.shippingFee || 0) - (order.discount || 0)).toFixed(2) }}</span>
                </div>
              </div>

              <!-- 支付方式 -->
              <div class="payment-methods">
                <h3 class="section-title">选择支付方式</h3>
                <div class="method-options">
                  <div v-for="method in paymentMethods" :key="method.id"
                       class="payment-method"
                       :class="{ selected: selectedPaymentMethod === method.id }"
                       @click="selectPaymentMethod(method.id)"
                  >
                    <div class="method-icon" :style="{ backgroundColor: method.color }">
                      <i :class="method.icon"></i>
                    </div>
                    <div class="method-details">
                      <h4 class="method-name">{{ method.name }}</h4>
                      <p class="method-desc">{{ method.description }}</p>
                    </div>
                    <div class="check-icon" v-if="selectedPaymentMethod === method.id">
                      <i class="fa fa-check-circle"></i>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 支付按钮 -->
              <div class="payment-actions">
                <button class="cancel-btn" @click="cancelOrder">
                  <i class="fa fa-times"></i> 取消订单
                </button>
                <button class="pay-btn" @click="processPayment"
                        :disabled="isProcessing || !selectedPaymentMethod"
                        :class="{ 'processing': isProcessing }"
                >
                  <span v-if="!isProcessing">
                    <span class="btn-text">立即支付</span>
                    <span class="btn-amount"
                    >¥{{
                        ((order.totalPrice || 0) + (order.shippingFee || 0) - (order.discount || 0)).toFixed(2)
                      }}</span>
                  </span>
                  <span v-else class="processing-indicator">
                    <i class="fa fa-spinner fa-spin"></i> 处理中...
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
    <!-- 在地址区域添加弹出框按钮 -->
    <div class="address-card" v-if="order.shippingAddress">
      <!-- 原有地址展示 -->
      <div class="recipient-info">
        <span class="name">{{ order.shippingAddress.name || '-' }}</span>
        <span class="phone">{{ formatPhone(order.shippingAddress.phone) || '-' }}</span>
      </div>
      <div class="address-details">
        <i class="fa fa-map-marker"></i>
        <span>{{ order.shippingAddress.addressLine1 || '-' }}, {{ order.shippingAddress.city || '-' }},
    {{ order.shippingAddress.province || '-' }}, {{ order.shippingAddress.postalCode || '-' }}</span>
      </div>
      <!-- 新增弹出框触发按钮 -->
      <button class="edit-btn" @click="showAddressModal = true">
        <i class="fa fa-pencil"></i> 选择地址
      </button>
    </div>

    <!-- 地址选择弹出框 -->
    <div v-show="showAddressModal" class="address-modal-overlay">
      <div class="address-modal-content">
        <div class="modal-header">
          <h3>选择收货地址</h3>
          <button class="close-btn" @click="showAddressModal = false">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div
            v-for="(address, index) in mockAddresses"
            :key="index"
            class="address-item"
            @click="selectAddress(address)"
            :class="{ selected: address.id === selectedAddressId }"
          >
            <div class="address-preview">
              <span class="name">{{ address.name }}</span>
              <span class="phone">{{ formatPhone(address.phonenumber) }}</span>
              <div class="address-detail">
                {{ address.levelOneName }}, {{ address.levelTwoName }}, {{ address.levelThreeName }},
                {{ address.levelFourName }}
              </div>
            </div>
            <!--            <div class="checkmark" v-if="address.id === selectedAddressId">-->
            <!--              <i class="fa fa-check"></i>-->
            <!--            </div>-->
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="showAddressModal = false">取消</button>
          <button class="confirm-btn" @click="confirmAddress">确认选择</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAddress } from '@/api/list/user.js'
import { getOrderData, getProduct, getEditAddress } from '@/api/list/order.js'
import UserAddress from './userAddress.vue'

export default {
  name: 'CheckoutPage',
  components: { UserAddress },
  props: {
    id: {
      type: Number,
      required: true
    },
    userId: {
      type: Number,
      required: true
    }
  },
  watch: {
    id(newVal) {
      if (newVal) this.fetchOrderData()
      this.confirmAddress()
      this.showAddressModal = false
      this.isProcessing = false
    }
  },
  data() {
    return {
      showAddressModal: false, // 控制弹出框显示
      selectedAddressId: null, // 选中地址ID
      mockAddresses: [ // 模拟地址数据
        {
          id: 1,
          name: '张三',
          phone: '13812345678',
          addressLine1: '朝阳区建国路88号',
          city: '北京市',
          province: '北京市',
          postalCode: '100022'
        },
        {
          id: 2,
          name: '李四',
          phone: '13987654321',
          addressLine1: '浦东新区东方明珠塔',
          city: '上海市',
          province: '上海市',
          postalCode: '200120'
        },
        {
          id: 3,
          name: '王五',
          phone: '18600001111',
          addressLine1: '天河区珠江新城',
          city: '广州市',
          province: '广东省',
          postalCode: '510620'
        }
      ],
      loading: true,
      currentStep: 3,
      isProcessing: false,
      selectedPaymentMethod: 1,
      order: {},
      paymentMethods: [
        {
          id: 1,
          name: '微信支付',
          icon: 'fa fa-weixin',
          color: '#07C160',
          description: '使用微信扫码支付'
        },
        {
          id: 2,
          name: '支付宝',
          icon: 'fa fa-alipay',
          color: '#1677FF',
          description: '使用支付宝扫码支付'
        },
        {
          id: 3,
          name: '银行卡',
          icon: 'fa fa-credit-card',
          color: '#36CFC9',
          description: '使用储蓄卡/信用卡支付'
        },
        {
          id: 4,
          name: '余额支付',
          icon: 'fa fa-money',
          color: '#FF7D00',
          description: '使用账户余额支付'
        }
      ]
    }
  },
  created() {
    this.fetchOrderData()
    this.editAddr()
  },
  methods: {
    // 获取订单数据
    async fetchOrderData() {
      try {
        // 开始加载
        this.loading = true

        // 获取订单基本信息
        const orderResponse = await getOrderData(this.id)
        console.log('订单基本信息:', orderResponse)

        // 获取商品详情（假设 orderResponse.data 包含商品ID列表或关联ID）
        const productResponse = await getProduct(orderResponse.msg)
        console.log('商品详情:', productResponse)
        this.order = productResponse.data

        // // 合并数据
        // this.order = {
        //   ...orderResponse.data,
        //   items: productResponse.data?.items || []
        // }

        // // 检查数据完整性
        // if (!this.order.orderId) {
        //   throw new Error('订单信息不完整')
        // }
      } catch (error) {
        console.error('获取订单数据失败:', error)
        this.$message.error('加载订单失败，请重试')
      } finally {
        // 无论成功或失败，都结束加载状态
        this.loading = false
      }
    },

    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return '-'
      const date = new Date(dateString)
      return date.toLocaleString()
    },

    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return '-'
      return phone.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
    },

    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        1: '待支付',
        2: '已支付',
        3: '已发货',
        4: '已签收',
        5: '已完成',
        6: '已取消'
      }
      return statusMap[status] || '未知状态'
    },

    // 获取订单状态样式
    getStatusClass(status) {
      const classMap = {
        1: 'status-pending',
        2: 'status-paid',
        3: 'status-shipping',
        4: 'status-received',
        5: 'status-completed',
        6: 'status-canceled'
      }
      return classMap[status] || ''
    },

    // 选择支付方式
    selectPaymentMethod(id) {
      this.selectedPaymentMethod = id
    },

    // 处理支付
    async processPayment() {
      if (this.isProcessing || !this.selectedPaymentMethod) return

      try {
        this.isProcessing = true

        // 模拟支付处理
        await new Promise(resolve => setTimeout(resolve, 2000))

        // 支付成功后的处理
        this.$message.success('支付成功！')
        // 跳转到支付成功页面或刷新订单状态
      } catch (error) {
        console.error('支付失败:', error)
        this.$message.error('支付失败，请重试')
      } finally {
        this.isProcessing = false
      }
    },

    // 取消订单
    cancelOrder() {
      if (confirm('确定要取消此订单吗？')) {
        this.order.status = 6 // 更新订单状态为已取消
        alert('订单已取消')
      }
    },

    // 选择地址
    selectAddress(address) {
      this.$message.error(address.id)
      this.selectedAddressId = address.id
    },
    // 确认地址选择
    editAddr() {
      getAddress(this.userId)
        .then((response) => {
          this.mockAddresses = response.data

        })
        .catch((error) => {
          this.$message.error('获取地址失败')
        })
    },
    confirmAddress() {
      getEditAddress(this.order.orderId, this.selectedAddressId).then((response) => {
        this.$message.error('添加地址成功')
        this.fetchOrderData()
      })
      this.showAddressModal = false
      // } else {
      //   this.$message.warning('请选择一个地址')
      // }
    },
    editAddress() {
      this.showAddressModal = true
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: #f8fafc;
  color: #334155;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 30px;
}

.col-8 {
  grid-column: span 2;
}

/* 加载状态样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.spinner {
  text-align: center;
}

.spinner p {
  margin-top: 16px;
  font-size: 16px;
  color: #64748b;
}

/* 头部样式 */
.checkout-header {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px 0;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
  color: #165DFF;
}

.checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step.active .step-number {
  background-color: #165DFF;
  color: white;
  border-color: #165DFF;
}

.step.active .step-label {
  color: #165DFF;
  font-weight: 500;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background-color: white;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 8px;
}

.step-label {
  font-size: 14px;
  color: #64748b;
}

.connector {
  flex-grow: 1;
  height: 2px;
  background-color: #e2e8f0;
  position: relative;
}

.connector.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #165DFF;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 24px;
  margin-bottom: 30px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 16px;
  margin-top: 24px;
}

/* 订单信息样式 */
.order-info {
  margin-bottom: 24px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f8fafc;
}

.info-row:last-child {
  border-bottom: none;
}

.label {
  color: #64748b;
  font-size: 15px;
}

.value {
  color: #1e293b;
  font-size: 15px;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
}

.status-pending {
  background-color: #fff7ed;
  color: #fb923c;
}

.status-paid {
  background-color: #ecfccb;
  color: #65a30d;
}

/* 地址样式 */
.address-section {
  margin-bottom: 24px;
}

.address-card {
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 16px;
}

.recipient-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.name {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
}

.phone {
  font-size: 15px;
  color: #64748b;
}

.address-details {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #475569;
  font-size: 15px;
  margin-bottom: 12px;
}

.edit-btn {
  background: none;
  border: none;
  color: #165DFF;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.empty-address, .empty-products {
  text-align: center;
  padding: 20px;
  color: #64748b;
}

/* 商品列表样式 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.product-image {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #f8fafc;
  flex-shrink: 0;
}

.img-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-details {
  flex: 1;
  min-width: 0;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-sku {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price {
  font-size: 16px;
  font-weight: 600;
  color: #e11d48;
}

.quantity {
  font-size: 14px;
  color: #64748b;
}

.product-subtotal {
  font-size: 16px;
  font-weight: 600;
  color: #e11d48;
  text-align: right;
  min-width: 80px;
}

/* 支付摘要样式 */
.summary-items {
  margin-bottom: 30px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-item.total {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px dashed #e2e8f0;
}

.summary-item .label {
  font-size: 15px;
}

.summary-item .value {
  font-size: 15px;
}

.summary-item.total .label {
  font-size: 16px;
  font-weight: 500;
}

.summary-item.total .value {
  font-size: 18px;
  font-weight: 600;
  color: #e11d48;
}

.discount .value {
  color: #16a34a;
}

/* 支付方式样式 */
.payment-methods {
  margin-bottom: 30px;
}

.method-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.payment-method {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
}

.payment-method.selected {
  border-color: #165DFF;
  background-color: #f5f8ff;
}

.method-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.method-details {
  flex: 1;
}

.method-name {
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 2px;
}

.method-desc {
  font-size: 14px;
  color: #64748b;
}

.check-icon {
  color: #165DFF;
  font-size: 18px;
  flex-shrink: 0;
}

/* 支付按钮样式 */
.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cancel-btn {
  padding: 14px 24px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pay-btn {
  padding: 14px 24px;
  background-color: #165DFF;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-btn:disabled {
  background-color: #e2e8f0;
  color: #94a3b8;
  cursor: not-allowed;
}

.processing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 响应式布局 */
@media (max-width: 992px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .col-8 {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .checkout-steps {
    gap: 20px;
  }

  .step-label {
    display: none;
  }

  .product-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }

  .product-details {
    width: 100%;
  }

  .product-subtotal {
    align-self: flex-end;
  }
}

/* 添加弹出框样式 */
.address-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.address-modal-content {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
}

.modal-body {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.address-item {
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8fafc;
}

.address-item:hover {
  background-color: #e9f2ff;
}

.address-item.selected {
  background-color: #e9f2ff;
  border: 2px solid #165DFF;
  padding: 14px;
}

.address-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.name {
  font-weight: 500;
  color: #1e293b;
}

.checkmark {
  color: #165DFF;
  font-size: 18px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.confirm-btn {
  padding: 12px 24px;
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* 添加弹出框样式 */
.address-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.address-modal-content {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  max-width: 600px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  color: #64748b;
  cursor: pointer;
}

.modal-body {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.address-item {
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f8fafc;
}

.address-item:hover {
  background-color: #e9f2ff;
}

.address-item.selected {
  background-color: #e9f2ff;
  border: 2px solid #165DFF;
  padding: 14px;
}

.address-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.name {
  font-weight: 500;
  color: #1e293b;
}

.checkmark {
  color: #165DFF;
  font-size: 18px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.confirm-btn {
  padding: 12px 24px;
  background-color: #165DFF;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
</style>
